<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="cityBox">
        <el-cascader placeholder="选择城市" v-model="value1" :options="options" filterable :props @change="onChange" />
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, defineEmits, defineProps, watch } from 'vue';

import citys from './CityData.json'
import { children } from '@/router/modules/Bose';
let value1: string = ref('');

let prop = defineProps({
    modelvalue: {
        type: String
    }
});
watch(
    () => prop.modelvalue,
    (newValue, oldValue) => {
        console.log(newValue, oldValue);
        console.log('====modelValue====', prop.modelvalue);
        value1.value = prop.modelvalue
    },
    {
        deep: true,
        immediate: true
    }
);
let options = reactive(citys);
const emit = defineEmits(['update']);

//点击触发事件 获取当前选中的城市信息
const onChange = (val: any) => {
    let cityCode = optionsFn(options, val);
    emit('update:modelValue', cityCode.code)
};
// 级联选择器绑定的值
let props = reactive({
    expandTrigger: 'hover' as const,
    emitPath: false,
    value: 'code',
    label: 'label',
    children: 'children'
});

// 定义接口类型
interface OptionsInter {
    label: string;
    level: string;
    code: string;
    [propName: string]: any;
}

//通过城市编码 获取城市名称
const optionsFn = (arr: OptionsInter[], code: string) => {
    let newItem = ref<OptionsInter>();
    arr.forEach((item) => {
        if (item.children.length >= 1) {
            for (const key in item.children) {
                if (item.children[key].code == code) {
                    newItem.value = item.children[key]
                }
            }
        }
    });
    return newItem
};
</script>